<template>
  <view class="a">
    <uni-nav-bar1 title="视频列表" fixed leftIcon="arrowleft" statusBar :border="false" color="#fff"></uni-nav-bar1>
    <view class="tablist">
      <view class="flex-box fixed">
        <view class="flex-item" v-for="(item, index) in tabList" :key="index" @click="tabChange(index)" :class="{ active: index == curIndex }">{{ item.name }}</view>
      </view>
    </view>
    <view class="video-item" v-for="(item, index) in curTab.list" :key="index" @click="$util.goUrl(`/pages/videoDetail?id=${item.id}`)">
      <!-- <view class="collect flex-center" @click.stop="collect(item)">
        <view class="iconfont iconweidianzhongdeaixin"></view>
      </view> -->
      <image class="img" :src="item.titleImgUrl" mode="aspectFill" />
      <view class="con">
        <view class="flex-start">
          <view class="tag flex-center primary">{{ ["全部", "农技百科", "春耕课程", "鲜果农技"][item.knowledgeTypeId] }}</view>
          <view class="tit">{{ item.title }}</view>
        </view>
        <view class="flex-row-center others">
          <view class="author">{{ item.publicName }}</view>
          <view class="link primary">详情</view>
        </view>
      </view>
    </view>
    <uni-load-more :status="curTab.loadStatus"></uni-load-more>
  </view>
</template>

<script>
import utils from "@/utils/util.js";
export default {
  data() {
    return {
      curIndex: 0,
      tabList: [{ name: "全部" }, { name: "农技百科" }, { name: "春耕课堂" }, { name: "鲜果农技" }],
      curTab: {
        isLoaded: false,
        loadStatus: "loading", // 加载状态
        isEmpty: false, // 是否空白数据
        page: {
          page: 0,
          size: 10,
          finished: false,
        },
        list: [],
      },
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    collect: utils.throttle(function (item) {
      this.$toast("收藏成功");
    }, 500),
    tabChange(index) {
      this.curIndex = index;
      this.getList(true);
    },
    getList(init) {
      const curTabItem = this.curTab;

      // 初始化
      if (init) {
        curTabItem.page.page = 0;
        curTabItem.loadStatus = "loading";
        curTabItem.list = [];
        curTabItem.page.finished = false;
      }

      if (curTabItem.loading || curTabItem.page.finished) return;
      curTabItem.page.page++;

      const data = {
        knowledgeTypeId: this.curIndex,
        current: curTabItem.page.page,
        size: curTabItem.page.size,
        // isRm: 0,
        // isTj: 0,
      };

      this.$axios({
        url: "farming/list",
        data,
      }).then((res) => {
        this.curTab = {
          isLoaded: true,
          loadStatus: res.current >= res.total ? "noMore" : "loading", // 加载状态
          isEmpty: ![...curTabItem.list, ...res.data].length, // 是否空白数据
          page: {
            ...curTabItem.page,
            finished: res.current >= res.total,
          },
          list: [...curTabItem.list, ...res.data],
        };
      });
    },
    onReachBottom() {
      console.log("next page");
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.tablist {
  text-align: center;
  height: 96rpx;
  color: #8f9bb3;
  font-size: 30rpx;
  line-height: 96rpx;
  .fixed {
    position: fixed;
    width: 100%;
    background: #fff;
    z-index: 100;
  }
  .active {
    position: relative;
    color: #64ba02;
    font-weight: 500;
    &:before {
      position: absolute;
      content: "";
      height: 4rpx;
      width: 40rpx;
      left: 50%;
      bottom: 0;
      background-color: #64ba02;
      transform: translate(-50%);
    }
  }
}
.video-item {
  position: relative;
  width: 688rpx;
  height: 400rpx;
  margin: 42rpx auto 0;
  background: #ffffff;
  box-shadow: 0px 10rpx 20rpx 0px rgba(198, 218, 248, 0.25);
  border-radius: 16rpx;
  overflow: hidden;
  .img {
    display: block;
    width: 100%;
    height: 254rpx;
    background: #eee;
  }
  .collect {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 1;
    width: 64rpx;
    height: 64rpx;
    background: rgba(18, 25, 35, 0.15);
    border-radius: 20rpx;
    font-size: 27rpx;
    color: #fff;
    &.active {
      color: #ff2d55;
    }
  }
  .con {
    padding: 26rpx 36rpx 0 26rpx;
  }
  .tag {
    min-width: 110rpx;
    height: 36rpx;
    margin-right: 20rpx;
    border-radius: 4rpx;
    border: 2rpx solid #64ba02;
    font-size: 24rpx;
  }
  .title {
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222b45;
  }
  .author {
    color: #8f9bb3;
  }
  .others {
    margin-top: 16rpx;
    font-size: 26rpx;
  }
}
</style>
<style lang="scss">
.tab-list {
  .van-tabs__line {
    background-color: transparent !important;
    &:before {
      position: absolute;
      content: "";
      height: 100%;
      width: 40rpx;
      left: 50%;
      top: 0;
      background-color: #64ba02;
      transform: translate(-50%);
    }
  }
}
</style>
